<template>
  <div>

    <div style="display: flex; margin-top: 20px">
      <div style="width: 50%;">
        <div id="CO" style="width: 100%; height: 400px"></div>
      </div>
      <div style="width: 50%;">
        <div id="temperatureHumidity" style="width: 100%; height: 400px"></div>
      </div>
    </div>

    <div style="display: flex; margin-top: 20px">
      <div style="width: 50%;">
        <div id="lightIntensity" style="width: 100%; height: 400px"></div>
      </div>
      <div style="width: 50%;">
        <div id="airQuality" style="width: 100%; height: 400px"></div>
      </div>

    </div>
  </div>
</template>

<script>

import request from "@/utils/request";
import * as echarts from 'echarts';

export default {
  data() {
    return {
      params: {
        interval: 3,
      },
    };
  },
  mounted() {
    this.initEcharts();
    this.refreshTemperatureHumidity();
  },
  methods: {
    //初始化饼状图数据
    initEcharts() {
      request.get("AQS/echarts/line", {params: this.params}).then(res => {
        console.log("params:", this.params);
        if (res.code === '0') {
          let map = res.data;
          this.initAirQuality(map.xAxis, map.yAxis);  // 调用绘图方法
        } else {
          this.$message.error(res.msg);
        }
      });
      request.get("CoS/echarts/line", {params: this.params}).then(res => {
        if (res.code === '0') {
          let map = res.data;
          this.initCO(map.xAxis, map.yAxis);  // 调用绘图方法
        } else {
          this.$message.error(res.msg);
        }
      });
      request.get("LS/echarts/line", {params: this.params}).then(res => {
        if (res.code === '0') {
          let map = res.data;
          this.initLightIntensity(map.xAxis, map.yAxis);  // 调用绘图方法
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    refreshTemperatureHumidity() {
      // 页面挂载完成后，先请求一次
      this.loadTemperatureHumidity();

      // 每30秒刷新一次（可以自己改时间，单位是毫秒）
      this.timer = setInterval(() => {
        this.loadTemperatureHumidity();
      }, 10000); // 10秒刷新一次
    },

    loadTemperatureHumidity() {
      request.get("THS/echarts/pie", {params: this.params}).then(res => {
        if (res.code === '0') {
          let data = res.data;
          this.initTemperatureHumidity(data.temperature, data.humidity);
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    //折线图
    initLightIntensity(xAxis, yAxis) {
      const dom = document.getElementById('lightIntensity');
      if (!dom) {
        console.error('初始化失败：#lightIntensity DOM 不存在');
        return;
      }
      const myChart = echarts.init(dom);
      const option = {
        title: {
          text: '光照强度变化',
          subtext: '统计维度：某地点的光照强度',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: xAxis, // 时间段 // 时间段（例如：一天的各个时段）
          name: '时间'
        },
        yAxis: {
          type: 'value',
          name: '光照强度 (lux)',
          axisLabel: {
            formatter: '{value} lux' // 格式化单位为 lux
          }
        },
        series: [
          {
            name: '光照强度',
            type: 'line',
            data: yAxis, // 示例数据：不同时间段的光照强度
            smooth: true,  // 平滑曲线
            lineStyle: {
              color: '#f39c12'
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    //温湿度图表
    initTemperatureHumidity(temperature, humidity) {
      const dom = document.getElementById('temperatureHumidity');
      if (!dom) {
        console.error('初始化失败：#temperatureHumidity DOM 不存在');
        return;
      }
      const myChart = echarts.init(dom);
      const option = {
        title: {
          text: '实时温湿度监控',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '温度',
            type: 'gauge',
            center: ['25%', '50%'], // 设置第一个仪表盘的位置
            radius: '60%',
            detail: {formatter: '{value} °C'},  // 格式化温度单位
            data: [{value: temperature, name: '温度'}]  // 温度数据（实时数据）
          },
          {
            name: '湿度',
            type: 'gauge',
            center: ['75%', '50%'], // 设置第二个仪表盘的位置
            radius: '60%',
            detail: {formatter: '{value} %'},  // 格式化湿度单位
            data: [{value: humidity, name: '湿度'}]  // 湿度数据（实时数据）
          }
        ]
      };
      myChart.setOption(option);
    },

    initCO(xAxis, yAxis) {
      const dom = document.getElementById('CO');
      if (!dom) {
        console.error('初始化失败：#CO DOM 不存在');
        return;
      }
      const myChart = echarts.init(dom);
      const option = {
        title: {
          text: '一氧化碳监测',
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['CO']
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: xAxis // 时间段
        },
        yAxis: {
          type: 'value',
          name: '数值'
        },
        series: [
          {
            name: 'CO浓度',
            type: 'line', // CO2 用折线图
            data: yAxis, // CO2 数据
            itemStyle: {
              color: '#3498db'
            }
          }
        ]
      };
      myChart.setOption(option);
    },

    initAirQuality(xAxis, yAxis) {
      const dom = document.getElementById('airQuality');
      if (!dom) {
        console.error('初始化失败：#airQuality DOM 不存在');
        return;
      }
      const myChart = echarts.init(dom);
      const option = {
        title: {
          text: '甲烷监测',
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['CO']
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: xAxis // 时间段
        },
        yAxis: {
          type: 'value',
          name: '数值'
        },
        series: [
          {
            name: 'HCHO',
            type: 'line',
            data: yAxis,
            itemStyle: {
              color: '#3498db'
            }
          }
        ]
      };
      myChart.setOption(option);
    },
  }
}
</script>
